<template>
    <div class="newsinfocontainer">
        <!-- $route可以获取url地址栏传递的信息   问号形式用query获取去  斜线传参用 params 获取  -->
        <!-- this.$route.params  获取url传递的信息  -->
        <!-- this.$route.query   获取url传递的信息 -->
        <!-- <h3>新闻详情页------{{ $route.params.id }}</h3> -->
        <h4 class="newsinfotitle">{{ newsinfolist.title }}</h4>
        <p class="newsinfotime">
            <span>发表时间：{{ newsinfolist.add_time | dataFrom }}</span>
            <span>点击次数：{{ newsinfolist.click }}次</span>
        </p>
        <hr>
        <div class="container" v-html="newsinfolist.content"></div>

        <!-- 子组件标签 -->
        <comment-box></comment-box>
    </div>  
</template>


<script>
    import { Toast } from 'mint-ui'
    // 导入子组件
    import comment from '../subcomponents/comment.vue'

    export default {
        data(){
            return{
                newsinfolist:{}
            };
        },
        created(){
            this.getnewsinfo();
        },
        methods:{
            getnewsinfo(){
                // 获取新闻列表详情的方法
                // 1.获取到当前新闻的 id   2.发送数据请求，获取新闻数据    3.把新闻数据保存到data上    4.渲染页面
                var id = this.$route.params.id;
                this.$http.get('api/getnew/' + id ).then(result=>{
                    if(result.body.status === 0 ){
                        this.newsinfolist = result.body.message[0]
                    }else {
                        Toast('获取信息失败')
                    }
                })
            }
        },
        components:{
            'comment-box':comment
        }
    }
</script>


<style lang="scss">
.newsinfocontainer{
    padding:0px 4px;
    .newsinfotitle{
        color:red;
        font-size: 15px;
        margin:10px 4px;
    }
    .newsinfotime{
        color:#226aff;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    }
    .container{
        img{
            width:100%;
        }
    }
}


</style>

